<template>
  <div>
    <div class="login">
      <img src="../assets/images/登录页-1.jpg" alt="" width="100%" />
      <div class="ipt">
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="username" type="username" label="账号"  class="input"/>
        <!-- 输入密码 -->
        <van-field
          v-model="password"
          type="password"
          label="密码"
          class="input"
        />

        <div class="btn">
          <button @click="goGoods">立即登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { LoginByWeb } from "../request/api";
export default {
  data() {
    return {
      //用户名 13400000000
      username: "",
      //密码 1234
      password: "",
    };
  },

  methods: {
    goGoods() {
      if (!this.username || !this.password) {
        this.$toast("请重新输入");
      }  else {
        LoginByWeb({
          username: this.username,
          password: this.password,
        }).then((res) => {
          if (res.errCode == 0) {
            localStorage.setItem("token", res.data);
          }
          this.$toast("正在加载");
          setTimeout(() => {
            this.$router.push("/home");
          }, 1500);
        });
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: relative;

  .ipt {
    position: absolute;
    bottom: 135px;
    left:65px;

    .input {
      /* width: 90%; */
      height: 35px;
      /* line-height: 35px; */
      border-radius: 20px;
      margin-bottom: 10px;
      background-color: #ffcc33;
      border: 1px solid #000;
    }
    /deep/.van-field__label{
      width: 30px;
    }
    /deep/.van-field__control{
      width: 100%;
    }
    .btn {
      button {
        height: 40px;
        border-radius: 20px;
        background-color: #003399;
        color: #fff;
        width: 45%;
        margin-left: 25%;
        margin-top: 20px;
        border: 1px solid #000;
        user-select: none;
      }
    }
  }
}
</style>